<template>
  <div id="appDownLoad">
    <!-- <div class="downbox" :style="{ backgroundColor: list.bgColor }">
        <div class="cloud"><img src="../assets/images/icon/cloud.png" /></div>
        <div class="imgbox">
          <img src="../assets/images/icon/d-logo.png" />
        </div>
        <div class="tx">让医学教育因我而改变</div>
        <div class="en">Let medical education change because of me</div>
        <div class="d-btn android" @click="down" v-if="!isIphone">
          Android版 下载
        </div>
        <div class="d-btn iphone" @click="down" v-if="isIphone">
          iPhone版 下载
        </div>
        <div class="author">开发者：上海众茂医疗科技有限公司</div>
        <div v-if="isAndroid">机型:{{type}}</div>
      </div> -->
    <div class="downbox">
      <div class="logobox">
        <img src="~@/assets/images/download/logo.png" />
      </div>
      <div class="tl">
        <img src="~@/assets/images/download/tx.png" />
      </div>
      <div class="content">
        <img src="~@/assets/images/download/content.png" />
      </div>
      <div class="d-btn android" @click="down" v-if="!isIphone">
        Android版 下载
      </div>
      <div class="d-btn iphone" @click="down" v-if="isIphone">
        iPhone版 下载
      </div>
      <div class="author">开发者：上海众茂医疗科技有限公司</div>
    </div>
  </div>
  <div class="mask" v-if="isMask">
    <img class="tip" src="~@/assets/images/icon/d-tip.png" />
  </div>
</template>
      
  <script>
// import os from "./js/base.js";
import { os } from "@/utils/base.js";
export default {
  layout: "no-layout",
  name: "appDownLoad",
  props: {},
  components: {},
  data() {
    return {
      downList: [
        {
          name: "iPhone版 下载",
          android: "https://sw.zhishiyisheng.com/dc/apk/release/zm_doctor.apk",
          iphone: "https://itunes.apple.com/cn/app/id6463606614",
          bgColor: "#FF9514",
          img: "~@/assets/images/icon/d-logo.png",
          tip: "医学教育因我而改变",
        },
      ],
      list: {},
      isIphone: false,
      isMask: false,
      isAndroid: false,
      type: null,
    };
  },
  computed: {},
  watch: {},
  created() {
    const from = this.$route.query.from;
    const t = this.$route.query.t;
    const r = this.$route.query.r;

    const str = {
      type: "jump2Study",
      data: {
        type: t,
        decode: r,
      },
    };
    if(os.android){
      window.android.postMessage(JSON.stringify(str)); //安卓
    }
    else if(os.iosDcApp){
      window.prompt("postMessage", JSON.stringify(str)); //ios
    }

    // if (from == "android") {
    //   window.android.postMessage(JSON.stringify(str)); //安卓
    // } else if (from == "ios") {
    //   window.prompt("postMessage", JSON.stringify(str)); //ios
    // }
    this.init();
  },
  mounted() {
    this.$nextTick(() => {
      this.isIphone = os.iphone;
      this.init();
    });
  },
  methods: {
    init() {
      const id = this.$route.query.id ? this.$route.query.id : 1;
      this.list = this.downList[id - 1];
    },

    down() {
      var URL;
      if (this.isIphone) {
        URL = this.list.iphone;
      } else {
        // URL = this.list.android;
        URL = "market://details?id=com.zmyl.doctor";
        // if (os.miui || os.huawei || os.oppo || os.vivo) {
        //   URL = "market://details?id=com.zmyl.doctor";
        // } else {
        //   URL = this.list.android;
        // }
      }
      var link = document.createElement("a");
      link.href = URL;
      link.click();

      if (os.weixin) {
        this.isMask = true;
      }
      if (!this.isIphone) {
        this.androidDownload();
      }
    },
    androidDownload() {
      URL = this.list.android;
      var link = document.createElement("a");
      link.href = URL;
      link.click();
    },
  },
};
</script>
      
    <style lang='scss'  scoped>
#appDownLoad {
  width: 100%;
  height: 100%;
}
img {
  width: 100%;
}
.downbox {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: scroll;
  background: url("@/assets/images/download/bg.png") no-repeat top left;
  background-size: 100% auto;
  background-color: #fdfcfc;
}
.logobox {
  width: 32vw;
  margin: 6.4vw;
}
.tl {
  width: 48vw;
  margin: 15vw 0 0 6.4vw;
}
.content {
  width: 87vw;
  margin: 16vw 0 0 6.4vw;
}
.tip {
  font-size: 3.2vw;
  width: 100%;
  text-align: center;
  margin-top: 6.93vw;
  color: #3d3d3d;
}
.imgbox {
  width: 24vw;
  margin: 0 auto 0;
  img {
    width: 100%;
  }
}
.cloud {
  width: 100%;
  img {
    width: 100%;
  }
}
.name {
  width: 100%;
  color: #fff;
  margin-top: 3.2vw;
  font-size: 4vw;
  text-align: center;
}
.tx {
  margin-top: 39.5vw;
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: 6.4vw;
}
.en {
  margin-top: 0.6vw;
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: 2.6vw;
}
.d-btn {
  width: 50.4vw;
  height: 13vw;
  line-height: 13vw;
  text-align: center;
  padding-left: 6vw;
  border-radius: 198px 198px 198px 198px;
  box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  margin: 21vw auto 0;
  position: relative;
  font-size: 4vw;
  background-color: #ff9514;
  &.iphone {
    color: #fff;
    &::before {
      content: "";
      position: absolute;
      width: 6.4vw;
      height: 6.4vw;
      background: url("@/assets/images/download/iphone.png") no-repeat left top;
      background-size: 100% 100%;
      left: 7.2vw;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  &.android {
    color: #fff;
    &::before {
      content: "";
      position: absolute;
      width: 5.2vw;
      height: 6.13vw;
      background: url("@/assets/images/download/android.png") no-repeat left top;
      background-size: 100% 100%;
      left: 7.2vw;
      top: 50%;
      transform: translateY(-50%);
    }
  }
}
.author {
  width: 100%;
  color: #797d88;
  text-align: center;
  font-size: 4vw;
  margin: 10.6vw 0 10vw;
}
.tip {
  width: 59.2vw;
  height: 11vw;
  position: absolute;
  right: 20px;
  top: 20px;
}
</style>
      